import React, { CSSProperties, useState, useEffect } from 'react'
import { withRouter, RouteComponentProps } from 'react-router-dom'
import { BottomNavigation, BottomNavigationAction } from '@material-ui/core'
import { HomeOutlined, AccountCircleOutlined, ShoppingCartOutlined, FormatListBulletedOutlined } from "@material-ui/icons";
import './FootBar.css'

interface IProps extends RouteComponentProps {
}
// 基础样式
const footBarStyle: CSSProperties = {
    position: 'fixed',
    bottom: 0,
    right: 0,
    left: 0,
    boxShadow: '-2px 0px 24px 0px rgb(0 0 0 / 10%)',
    backgroundColor: '#fff'
}
const FootBar = (props: IProps) => {
    const [value, setValue] = useState(0)
    // 解决刷新出现的BUG
    useEffect(() => {
        switch (props.location.pathname) {
            case '/home':
                setValue(0); return
            case '/classify':
                setValue(1); return
            case '/cart':
                setValue(2); return
            case '/profile':
                setValue(3); return
            default:
                setValue(-1);
        }
    }, [props])
    return (
        <>
            {
                props.location.pathname === '/detail' ||  props.location.pathname === '/login' ||  props.location.pathname === '/reg' || props.location.pathname === '/cart' ? (<></>) :
                    <div style={footBarStyle}>
                        <BottomNavigation
                            showLabels
                            value={value}
                            onChange={(event, newValue) => {
                                setValue(newValue);
                                switch (newValue) {
                                    case 0:
                                        props.history.push('/home'); return;
                                    case 1:
                                        props.history.push('/classify'); return;
                                    case 2:
                                        props.history.push('/cart'); return;
                                    case 3:
                                        props.history.push('/profile'); return
                                }
                            }}
                        >
                            <BottomNavigationAction label="精选" icon={<HomeOutlined />} />
                            <BottomNavigationAction label="分类" icon={<FormatListBulletedOutlined />} />
                            <BottomNavigationAction label="购物车" icon={<ShoppingCartOutlined />} />
                            <BottomNavigationAction label="我的" icon={<AccountCircleOutlined />} />
                        </BottomNavigation>
                    </div>
            }
        </>
    )
}

export default withRouter(FootBar)